400. Araxis Merge File Comparison Report

Produced by Araxis Merge on 2021-05-13 09:09:21 +0000. See www.araxis.com for information about Merge. This report uses XHTML and CSS2, and is best viewed with a modern standards-compliant browser. For optimum results when printing this report, use landscape orientation and enable printing of background images and colours in your browser.

400.1 Files compared

#LocationFileLast Modified
1/Applications/Ampps/www/Porto 3.2.2/Theme Files/Magento 2.x/Porto Theme/app/design/frontend/Smartwave/porto_rtl/Magento_LayeredNavigation/web/css/source_module.less2018-01-13 21:19:22 +0000
2/Applications/Ampps/www/Porto v4.0.0/Theme Files/Magento 2.x/Porto Theme/app/design/frontend/Smartwave/porto_rtl/Magento_LayeredNavigation/web/css/source_module.less2021-01-20 04:48:18 +0000

400.2 Comparison summary

DescriptionBetween
Files 1 and 2
Text BlocksLines
Unchanged25262
Changed16132
Inserted46
Removed5309

400.3 Comparison options

WhitespaceConsecutive whitespace is treated as a single space
Character caseDifferences in character case are significant
Line endingsDifferences in line endings (CR and LF characters) are ignored
CR/LF charactersNot shown in the comparison detail
Active line-pairing rules

400.4 Active regular expressions

No regular expressions were active.

400.5 Comparison detail

1 // /** 1 // /**
2 //  * Copyright © 2015 Magento. All rights reserved. 2 //  * Copyright © 2015 Magento. All rights reserved.
3 //  * See COPYING.txt for license details. 3 //  * See COPYING.txt for license details.
4 //  */ 4 //  */
5  5 
6 // 6 //
7 //    Common 7 //    Common
8 //  _____________________________________________ 8 //  _____________________________________________
9  9 
10 & when (@media-common = true) { 10 & when (@media-common = true) {
11 .filter { 11 .filter {
12     &.block { 12     &.block {
13         margin-bottom: 0; 13         margin-bottom: 0;
14     } 14     }
15     &-title { 15     &-title {
16         strong { 16         strong {
17             position: absolute; 17             position: absolute;
18             z-index: 2; 18             z-index: 2;
19             line-height: 16px; 19             line-height: 16px;
20             border: 1px solid @border-color__base; 20             border: 1px solid @border-color__base;
21             text-align: center; 21             text-align: center;
22             padding: 7px 10px; 22             padding: 7px 10px;
23             @_shadow: inset 0 1px 0 0 @color-white, inset 0 -1px 0 0 fade(@border-color__base, 30); 23             @_shadow: inset 0 1px 0 0 @color-white, inset 0 -1px 0 0 fade(@border-color__base, 30);
24             .lib-css(background-color, @toolbar-element-background); 24             .lib-css(background-color, @toolbar-element-background);
25             .lib-css(box-shadow, @_shadow); 25             .lib-css(box-shadow, @_shadow);
26             border-radius: 3px; 26             border-radius: 3px;
27             font-weight: 400; 27             font-weight: 400;
28             top: 0; 28             top: 0;
29             right: 0; 29             right: 0;
30             &[data-count]:after { 30             &[data-count]:after {
31                 content: attr(data-count); 31                 content: attr(data-count);
32                 display: inline-block; 32                 display: inline-block;
33                 border-radius: 2px; 33                 border-radius: 2px;
34                 padding: 2px; 34                 padding: 2px;
35                 font-size: .8em; 35                 font-size: .8em;
36                 margin: 0 5px; 36                 margin: 0 5px;
37                 .lib-css(color, @color-white); 37                 .lib-css(color, @color-white);
38                 min-width: 1em; 38                 min-width: 1em;
39                 line-height: 1; 39                 line-height: 1;
40                 background: @color-orange-red4; 40                 background: @color-orange-red4;
41             } 41             }
42             &.disabled { 42             &.disabled {
43                 opacity: .5; 43                 opacity: .5;
44             } 44             }
45         } 45         }
46     } 46     }
47     .block-subtitle { 47     .block-subtitle {
48         font-weight: @font-weight__semibold; 48         font-weight: @font-weight__semibold;
49         padding: @indent__s @indent__s @indent__base; 49         padding: @indent__s @indent__s @indent__base;
50         font-size: @font-size__base; 50         font-size: @font-size__base;
51         line-height: 1em; 51         line-height: 1em;
52         border-bottom: @border-width__base solid @border-color__base; 52         border-bottom: @border-width__base solid @border-color__base;
53         display: none; 53         display: none;
54     } 54     }
55     &-subtitle { 55     &-subtitle {
56             display: none; 56             display: none;
57     } 57     }
58     &-current { 58     &-current {
59         margin
: 0;
 59         margin-bottom: 0;
    60         margin-top: 0;
    61         padding: 20px 20px 0;
60         .items { 62         .items {
61             border: 1px solid #ddd; 63             padding: .7143em 0;
62             border-width: 0 1px; 64             border-width: 0
;
63             background-color: #fbfbfb; 65             margin: 0;
64             padding
10px 0;
 66             margin-top: -1px;
65             margin: 0 67             font-size: .9286em;
    68             &:last-child {
    69               padding-bottom
0;
    70             }
66         } 71         }
67         .item { 72         .item {
68             position: relative; 73             position: relative;
69             z-index: 1; 74             padding: 4px 0;
70             padding-right: 17px; 75             margin: 0;
71         } 76         }
72         .filter &-subtitle { 77         .filter &-subtitle {
73             display: block; 78           padding: 0;
74             padding: 10px 15px; 79           font-weight: 600;
75             font-size: 13px; 80           font-size: 15px;
76             font-weight: bold; 81           color: #222529;
77             text-transform: uppercase; 82           line-height: 1.4;
78             border: 1px solid #ddd;    
79             background-color: #f5f5f5;    
80             color: #777;    
81             position: relative; 83           position: relative;
82             cursor: pointer; 84           text-transform: uppercase;
83             border-radius: 7px 7px 0 0; 85           display: block;
    86           border: none;
84         } 87         }
85         .action.remove { 88         .action.remove {
86             &:extend(.abs-remove-button-for-blocks all); 89             &:extend(.abs-remove-button-for-blocks all);
87             position: absolute; 90             position: absolute;
88             left: 15px; 91             left: 0;
89             top: -2px; 92             top: 3px;
90         } 93         }
91     } 94     }
92     &-actions { 95     &-actions {
93         font-size: 11px; 96         padding: 0 20px 20px;
94         padding: 10px 15px; 97         border-bottom: 1px solid #e7e7e7;
95         background: #f7f7f7; 98         font-size: .9286em;
96         border
: 1px solid #ddd;
 99         a {display: inline-block; color: inherit !important;padding: 4px 0;}
97         border-radius: 0 0 7px 7px;    
98         text-align: right;    
99         margin-bottom: 14px;    
100     } 100     }
101     &-label { 101     &-label {
102         text-transform: uppercase; 102         text-transform: uppercase;
103          103 
104         &:after { 104         &:after {
105             content: ": "; 105             content: ": ";
106         } 106         }
107     } 107     }
108     &-value { 108     &-value {
109         .lib-css(color, @filter-quantity); 109         .lib-css(color, @filter-quantity);
110     } 110     }
111     &-options { 111     &-options {
112         display: none;    
113         margin: 0; 112         margin: 0;
114         &-item { 113         &-item {
115             margin-bottom: 14px; 114             border-bottom: 1px solid #e7e7e7;
116              115             margin-bottom: 0;
    116             margin-top: 0;
    117             padding: 20px;
117             &.active { 118             &.active {
118                 .filter-options-title {    
119                     border-radius: 7px 7px 0 0;    
120                 }    
121                 .filter-options-content { 119                 .filter-options-content {
122                     display: block !important; 120                     display: block !important;
123                 } 121                 }
124             } 122             }
125         } 123         }
126         &-title { 124         &-title {
127             padding: 10px 15px; 125             padding: 0;
128             font-size: 13px; 126             font-weight: 600;
129             font-weight: bold; 127             font-size: 15px;
130             text-transform: uppercase; 128             color: #222529;
131             border: 1px solid #ddd; 129             line-height: 1.4;
132             background-color: #f5f5f5;    
133             position: relative; 130             position: relative;
134             cursor: pointer; 131             text-transform: uppercase;
135             border-radius: 7px; 132             .toggle {
136  133               
display: inline-block;
137             .lib-icon-font( 134               width: 1.8571em;
138                 @_icon-font-content: @icon-down-dir, 135               height: 1.8571em;
139                 @_icon-font-size: 13px, 136               line-height: 1.7572em;
140                 @_icon-font-position: after,    
141                 @_icon-font-display: 
block
    
142             );    
143             &:after {    
144                 width: 26px;    
145                 height: 26px;    
146                 display: block;    
147                 border: 1px solid #ddd;    
148                 position: absolute; 137               position: absolute;
149                 left: 15px; 138               left: -7px;
150                 top: 50%; 139               top: 50%;
151                 margin-top: -13px; 140               margin-top: -.9em;
152                 border-radius: 3px; 141               padding: 0;
153                 color: #ccc; 142               cursor: pointer;
154                 text-align: center; 143               text-align: center;
155                 line-height: 24px; 144               transition: .25s;
156                 background-color: #fff; 145               &::before, &::after {
157                 font-size: 10px; 146                 content: '';
    147                 position: absolute;
    148                 left: 50%;
    149                 top: 50%;
    150                 background
: #222529;
    151                 cursor: pointer;
    152               }
    153               &::before {
    154                 width: 2px;
    155                 height: 10px;
    156                 margin-left: -1px;
    157                 margin-top: -5px;
    158                 display: block;
158             } 159               }
159             &:hover {    
160                 &:after { 160               &:after {
161                     background-color: @theme-color; 161                   width: 10px;
162                     color: #fff; 162                   height: 2px;
    163                   margin-left: -5px;
    164                   margin-top: -1px;
163                 } 165               }
164             } 166             }
165             .active > & { 167             .active > & {
166                 .lib-icon-font-symbol( 168               .toggle {
167                     @_icon-font-content: @icon-up-dir, 169                 &::before {display: none;}
168                     @_icon-font-position: after 170               }
169                 );    
170             } 171             }
171         } 172         }
172         &-content { 173         &-content {
    174             padding: .7143em 0;
    175             border-width: 0;
173             margin: 0; 176             margin: 0;
174             padding: 10px 15px;    
175             font-size: 13px;    
176             border: 1px solid #ddd;    
177             border-top: 0;    
178             border-radius: 0 0 7px 7px;    
179             background-color: #fbfbfb;    
180                 
181             .item {    
182                 margin: 3px 0;    
183                 line-height: 1.5em;    
184             }    
185             a { 177             a {
186                 color: @base-font-color !important; 178                 color: @base-font-color !important;
    179                 padding: 4px 0;
187                 &:hover { 180                 &:hover {
188                     .count { 181                     .count {
189                         text-decoration: none; 182                         text-decoration: none;
190                     } 183                     }
191                 } 184                 }
192             } 185             }
193             .count { 186             .count {
194                 .lib-css(color, @filter-quantity); 187                 .lib-css(color, @filter-quantity);
195                 padding-left: 5px; 188                 padding-left: 5px;
196                 &:before { 189                 &:before {
197                     content: "("; 190                     content: "(";
198                 } 191                 }
199                 &:after { 192                 &:after {
200                     content: ")"; 193                     content: ")";
201                 } 194                 }
202             } 195             }
203             .filter-count-label { 196             .filter-count-label {
204                 &:extend(.abs-visually-hidden all); 197                 &:extend(.abs-visually-hidden all);
205             } 198             }
    199             &:last-child {padding-bottom: 0;margin-bottom: 0;}
    200             .items {margin-top: -1px;}
206         } 201         }
    202         .item {margin: 0;}
207     } 203     }
208 } 204 }
209  205 
210 } 206 }
211     
212 //    
213 //    Mobile    
214 //--------------------------------------    
215     
216 .media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {    
217     body.filter-active {    
218         .page-wrapper {    
219             visibility: hidden;    
220             height: 0;    
221             margin-top: -999999em;    
222         }    
223         .columns {    
224             z-index: 999;    
225         }    
226     }    
227     
228     .filter {    
229         &.active {    
230             position: relative;    
231             z-index: 99;    
232             visibility: visible;    
233             .filter-options-item:last-child {    
234                 margin-bottom: @indent__xl;    
235             }    
236             .filter-title {    
237                 position: fixed;    
238                 top: 0;    
239                 right: 0;    
240                 left: 0;    
241                 height: 48px;    
242                 z-index: 2;    
243                 border-bottom: 1px solid @border-color__base;    
244                 strong {    
245                         left: 3px;    
246                         right: auto;    
247                         top: 10px;    
248                         border: 0;    
249                         background: none;    
250                         .lib-css(box-shadow, none);    
251                         color: transparent;    
252                         .lib-icon-font(    
253                             @icon-remove,    
254                             @_icon-font-color: @text__color__muted,    
255                             @_icon-font-size: 16px,    
256                             @_icon-font-position: after    
257                             );    
258                 }    
259             }    
260             .filter-subtitle {    
261                 display: block;    
262                 position: fixed;    
263                 top: 0;    
264                 right: 0;    
265                 left: 0;    
266                 height: 50px;    
267                 .lib-css(background, @toolbar-background);    
268                 z-index: 1;    
269                 line-height: 32px;    
270             }    
271             .filter-options {    
272                 display: block;    
273                 position: fixed;    
274                 top: 50px;    
275                 left: 0;    
276                 right: 0;    
277                 bottom: 0;    
278                 overflow: scroll;    
279                 .lib-css(background, @color-white);    
280                 z-index: 10;    
281             }    
282         }    
283     }    
284     
285     .filter {    
286         & &-subtitle {    
287             font-size: 20px;    
288             font-weight: @font-weight__light;    
289         }    
290         &-actions {    
291             margin: -35px -@indent__s @indent__m;    
292         }    
293         &-options-content {    
294             padding: @indent__xs @indent__s;    
295         }    
296     }    
297     .filter-no-options {    
298         .filter-title:before {    
299             content: "";    
300             width: 100px;    
301             height: 40px;    
302             background: rgba(255,255,255,.5);    
303             display: block;    
304             position: relative;    
305             z-index: 99;    
306             margin-top: -40px;    
307             right: -15px;    
308         }    
309     }    
310     .filter .filter-current {    
311         margin: @indent__xs -@indent__s 0;    
312         border: solid @border-color__base;    
313         border-width: 1px 0;    
314     
315         .items {    
316             display: none;    
317         }    
318         &-subtitle {    
319             text-transform: uppercase;    
320             position: relative;    
321             z-index: 1;    
322             .lib-icon-font(    
323                 @_icon-font-content: @icon-down,    
324                 @_icon-font-size: 13px,    
325                 @_icon-font-position: before,    
326                 @_icon-font-display: block    
327             );    
328             &:before {    
329                 position: absolute;    
330                 left: 10px;    
331                 top: 10px;    
332             }    
333     
334             &:after {    
335                 content:' (' attr(data-count) ')';    
336                 font-size:.9em;    
337                 .lib-css(color, @text__color__muted);    
338             }    
339         }    
340         &.active {    
341             padding-bottom: 30px;    
342             .block-subtitle {    
343                 .lib-icon-font-symbol(    
344                     @_icon-font-content: @icon-up,    
345                     @_icon-font-position: before    
346                 );    
347             }    
348             .items {    
349                 display: block;    
350             }    
351             & + .block-actions {    
352                 display: block;    
353             }    
354         }    
355         & + .block-actions {    
356             display: none;    
357         }    
358     }    
359 }    
360     
361 .media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {    
362     
363     .filter {    
364         &.block {    
365             margin-bottom: @indent__xl;    
366         }    
367         &-title {    
368             display: none;    
369         }    
370         &-content {    
371             .item {    
372                 margin: @indent__s 0;    
373             }    
374         }    
375         &.active &-options,    
376         &-options {    
377             clear: both;    
378             position: static;    
379             overflow: initial;    
380             display: block;    
381             background: transparent;    
382         }    
383         &-subtitle {    
384             position: static;    
385             display: block;    
386         }    
387     }    
388     .page-layout-1column {    
389         .toolbar-products {    
390             position: absolute;    
391             top: 0;    
392             width: 100%;    
393         }    
394         .products ~ .toolbar-products {    
395             position: static;    
396         }    
397         &.page-with-filter .column.main {    
398             position: relative;    
399             z-index: 1;    
400             padding-top: 45px;    
401         }    
402         .filter {    
403             &.block {    
404                 border-top: 1px solid @border-color__base;    
405             }    
406             &-content {    
407                 margin-top: @indent__s;    
408             }    
409             &-subtitle {    
410                 display: none;    
411             }    
412             &-options {    
413                 &-item {    
414                     display: inline-block;    
415                     border: 0;    
416                     margin-left: @indent__m;    
417                     &.active {    
418                         position: relative;    
419                         z-index: 2;    
420                         &:hover {    
421                             z-index: 3;    
422                         }    
423                         &:after,    
424                         &:before {    
425                             content: "";    
426                             display: block;    
427                             .lib-arrow(up, 8px, @color-black);    
428                             position: absolute;    
429                             right: 50%;    
430                             bottom: -1px;    
431                             z-index: 3;    
432                             margin-right: -20px;    
433                         }    
434                         &:after {    
435                             .lib-css(border-bottom-color, @color-white);    
436                             margin-top:2px;    
437                             z-index: 4;    
438                         }    
439                     }    
440                 }    
441                 &-title {    
442                     padding: 0 0 0 20px;    
443                     &:after {    
444                         left: 2px;    
445                         top: 3px;    
446                         z-index: 3;    
447                     }    
448                 }    
449                 &-content {    
450                     position: absolute;    
451                     z-index: 2;    
452                     .lib-css(background, @color-white);    
453                     width: 180px;    
454                     top: 100%;    
455                     border: 1px solid @border-color__base;    
456                     padding: @indent__xs 0;    
457                     @_shadow:  0 3px 5px 0 rgba(50, 50, 50, .75);    
458                     .lib-css(box-shadow, @_shadow, 1);    
459                     .item {    
460                         padding: @indent__xs;    
461                         margin:0;    
462                         a {    
463                             margin-right: 0;    
464                         }    
465                         &:hover {    
466                             background-color: @color-gray91;    
467                         }    
468                     }    
469                 }    
470             }    
471             &-current {    
472                 display: inline;    
473                 line-height: 35px;    
474                 &-subtitle {    
475                     display: inline;    
476                     padding: 0;    
477                     .lib-css(color, @text__color__muted);    
478                     font-size: @font-size__base;    
479                     font-weight: normal;    
480                     &:after {    
481                         content: ":";    
482                     }    
483                 }    
484                 .item,    
485                 .items {    
486                     display: inline;    
487                 }    
488                 .item {    
489                     margin-left: @indent__m;    
490                 }    
491                 .action.remove {    
492                     line-height: normal;    
493                 }    
494             }    
495             &-actions {    
496                 display: inline;    
497                 & ~ .filter-options {    
498                     margin-top: @indent__m;    
499                 }    
500             }    
501         }    
502     }    
503 }